<template>
  <div>

    <myheader></myheader>

			<br><br>

            <!-- 面包屑导航 -->
            <Breadcrumb :datas='datas'></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">

            <Avatar :src='src' :width='150' fit='fill'></Avatar>

            <br><br>

            <Button @click="changepic" color="red">{{ mybutton }}</Button>



            <table>

                <tr>
                    <td style="padding:5px">
                        密码：
                    </td>
                    <td style="padding:5px">
                        <input type="password" v-model='password'>
                    </td>

                <tr>
                    <td style="padding:5px">
                        确认密码：
                    </td>
                    <td style="padding:5px">
                        <input type="password" v-model='password1'>
                    </td>

                </tr>
                <tr>
                    <td style="padding:5px">
                      头像上传：

                    </td>
                    <td style="padding:5px">

                      <input type="file" @change="upload"/>

                    </td>

                </tr>
                <tr>
                    <td style="padding:5px">
                      七牛云上传：

                    </td>
                    <td style="padding:5px">

                      <input type="file" @change="upload_qiniu"/>

                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                        七牛云视频上传：
                    </td>
                    <td style="padding:5px">

                        <input type='file' @change='upload_qiniu_src'> <br>
                        <video id="video" :src='qiniu_src'  controls autoplay width="300" v-show='show'></video>
                    </td>

                </tr>
                <tr>
                    <td style="padding:5px">
                        进度条展示：
                    </td>
                    <td style="padding:5px">

                      {{loadpercent}}

                      <Progress v-show="loadpercent_int" :percent="loadpercent_int" color="blue"><span slot="title"></span><span slot="text">{{ loadpercent_int }}%</span></Progress>

                    </td>

                </tr>

                <tr>
                    <td style="padding:5px">

                    </td>
                    <td style="padding:5px">
                        <Button @click="submit">提交</Button>




                    </td>

                </tr>

            </table>

            <br /><br />

      <div>

        关注商品列表:

        <Checkbox :datas="goods" v-model="good_value"  ></Checkbox>

        <br /><br />

        <Button @click="flow" color="green">添加/取关批量操作</Button>

      </div>


		</div>
	</section>



    <mybody>

    </mybody>

  </div>

</template>



<script>

//导包
import myheader from './myheader.vue';
import mybody from './mybody.vue';
import {config,formatXml} from '../config';



export default {
  data () {
    return {

      msg: "这是一个变量",
      //声明面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'我的首页'}],
      password:'',
      password1:'',
      src:'',

      show:false,

      //视频播放地址
      qiniu_src:'',

      //七牛上传凭证
      uptoken:'',

       //进度条
      loadpercent:'',
            //整型
      loadpercent_int:0,
      //切换按钮变量
      mybutton:'进入画中画',

        //商品关注列表
      good_value:[],
      goods:[],
      myid:{}



    }
  },
  //注册组件标签
  components:{
      'myheader':myheader,

      'mybody':mybody,
  },

  mounted:function(){



      	//发送请求
	      this.axios.get('http://localhost:8000/userinfo/',{params:{uid:localStorage.getItem("uid")}}).then((result) =>{

					console.log(result);
			//视频地址
  			this.qiniu_src = 'http://q79yc57ps.bkt.clouddn.com/'+result.data.img;


            //   列表转字符串
            // JSON.stringify
            //字符串转列表
            // JSON.parse

		});

    //获取uptoken
    this.get_uptoken();

    //关注商品列表
    this.get_goods();



},
  methods:{

        //批量操作
    flow:function(){


        console.log(this.good_value);

        var goods = [];

        for(let i=0,l=this.good_value.length;i<l;i++){

            goods.push(this.myid[this.good_value[i]]);

        }

        var glist = JSON.stringify(goods);

        console.log(glist);


        this.axios.get('http://localhost:8000/getflow/',{params:{uid:localStorage.getItem("uid"),ids:glist,type:2}}).then((result) =>{

              console.log(result);

              this.$Message(result.data.message);

      });

    },

    //获取关注商品
    get_goods:function(){

      this.axios.get('http://localhost:8000/uidflow/',{params:{'uid':localStorage.getItem("uid")}}).then((result) =>{

              console.log(result);

              var goods = [];

              for(let i=0,l=result.data.length;i<l;i++){

                    goods.push(result.data[i].name);
                    this.myid[result.data[i].name] = result.data[i].id;

              }

              //赋值
              this.goods = goods;
              this.good_value = goods;

              console.log(goods);

      });

    },

      //定义画中画切换
      changepic:function(){

          //判断是否处于画中画界面
          if(video != document.pictureInPictureElement){

              //尝试进入画中画模式
              video.requestPictureInPicture();

              this.mybutton = '退出画中画'

          }else{
              //推出画中画
              document.exitPictureInPicture();

              this.mybutton = '进入画中画'
          }

      },

    //提交
    submit(){
          if (this.password === '') {
            this.$Message('密码不能为为空')
            return false
          }
          if (this.password1 === '') {
            this.$Message('密码不能为为空')
            return false
          }
          if (this.password !== this.password1) {
            this.$Message('两次密码不一致')
            return false
          }
          this.axios.get('http://127.0.0.1:8000/updatepass/',{params:{uid:localStorage.getItem('uid'),password:this.password}}).then(res=>{
              if(res.data.code == 200){
                  alert('修改成功')
                  this.$router.push('/')
              }else{
                  this.$Message(res.data.data);
              }
          })
    },
    //获取七牛云凭证
  	get_uptoken(){

  		this.axios.get('http://localhost:8000/uptoken/').then((result) =>{

  						console.log(result);
  						this.uptoken = result.data.token;

  		});

  	},
    //视频上传七牛云
       upload_qiniu_src(e){

        console.log(this.uptoken);

        //获取文件对象
        let file = e.target.files[0];

        //声明参数
        let param = new FormData();

        //将上传凭证添加参数
        param.append('token',this.uptoken);

        //附加文件
        param.append('file',file);

        //定制化axios
        const axios_qiniu = this.axios.create({withCredentials:false});




        //发送请求
        axios_qiniu({

          method:'POST',
          url:'http://up-z1.qiniu.com/',
          data:param,
          timeout:30000,

          //设置上传进度
          onUploadProgress:(e)=>{

           //设置总进度对象  已上传的字节数 / 总字节数
           var complete = (e.loaded / e.total);

           //安慰剂按钮
           if (complete < 1){

             this.loadpercent = (complete * 100).toFixed(2) + "%";

             this.loadpercent_int = parseInt((complete * 100).toFixed(2));

           }


         }

        }).then(result=>{
          console.log(result);

          //赋值
          this.qiniu_src = 'http://q79yc57ps.bkt.clouddn.com//' + result.data.key;


          //修改视频地址
          // 发送请求
          this.axios.get('http://localhost:8000/updateuser/',{params:{uid:localStorage.getItem("uid"),img:result.data.key}}).then((result) =>{

  						console.log(result);
				});

          //上传成功后，强行100%
          this.loadpercent = '100%';
          this.loadpercent_int = 100;


          this.show = true;



        });
    },


   	//图片上传七牛
  	upload_qiniu:function(e){


  		console.log(this.uptoken);

  		//获取文件对象
  		let file = e.target.files[0];

  		//声明参数
  		let param = new FormData();

  		//将上传凭证添加参数
  		param.append('token',this.uptoken);

  		//附加文件
  		param.append('file',file);

  		//定制化axios
  		const axios_qiniu = this.axios.create({withCredentials:false});

  		//发送请求
  		axios_qiniu({
  			method:'POST',
  			url:'http://up-z1.qiniu.com/',
  			data:param,
  			timeout:30000,
  		}).then(result =>{

  			console.log(result);

  			//赋值
  			this.src = 'http://q79yc57ps.bkt.clouddn.com/'+result.data.key;



  		});

  	},

      //头像提交
      upload:function(e){

        //获取文件对象
        let file = e.target.files[0];

        //声明参数
        let param = new FormData();

        //添加文件
        param.append('file',file,file.name);

        //声明请求头
        let config = {headers:{'Content-Type':'multipart/form-data'}};

        //发送请求
        this.axios.post('http://localhost:8000/uploadfile/',param,config).then((result) =>{

                console.log(result);

          //赋值操纵
          this.src = 'http://localhost:8000/static/upload/' + result.data.filename;

          });

  	  }


    }
}


</script>

<style>



</style>
